<template>
  <div class="content">
    <div class="szzfDiv">
      <TitleVue :name="'水政执法'" />
      <div class="szzfContent">
        <img src="@/assets/img/common/办公.png" />
        <div class="rightDiv">
          <p>
            2025年水政执法：<span>{{ szsfTotal }}</span
            >次
          </p>
          <p>最近一次执法：</p>
          <p>
            巡查时间：<span>{{ xcTime }}</span>
          </p>
          <p>
            巡查问题：<span>{{ xcQue }}</span>
          </p>
          <p>
            处理结果：<span>{{ clJg }}</span>
          </p>
          <p>巡查结果：<span class="details">详情＞＞</span></p>
        </div>
      </div>
    </div>

    <div class="glzdDiv">
      <TitleVue :name="'管理制度'" />
      <div class="glzdContent">
        <div class="itemDiv" v-for="(item, index) in glzdList" :key="index">
          <p :title="item.name">
            <span>{{ index + 1 }}</span> {{ item.name }}
          </p>
          <p>共{{ item.val }}节</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
export default {
  name: 'SzRight',
  components: {
    TitleVue
  },
  data() {
    return {
      szsfTotal: 12,
      xcTime: '2025年3月25日',
      xcQue: '发现有人游泳',
      clJg: '责令改正',
      glzdList: [
        {
          name: '首问责任制度',
          val: 4
        },
        {
          name: '清洁卫生制度',
          val: 5
        },
        {
          name: '考勤制度',
          val: 3
        },
        {
          name: '值班制度',
          val: 6
        },
        {
          name: '巡视检查项目和内容',
          val: 3
        },
        {
          name: '水库控制运行工作制度',
          val: 8
        },
        {
          name: '消防责任制度',
          val: 4
        },
        {
          name: '工作制度',
          val: 9
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .szzfDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .szzfContent {
      width: 100%;
      height: auto;
      padding: 0 2vw 1vh;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .rightDiv {
        width: auto;
        display: flex;
        flex-direction: column;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #e0ddf7;
        margin-left: 3vh;
        p:nth-child(1) {
          span {
            font-family: Source Han Sans CN;
            font-weight: Bold;
            font-size: 3.4vh;
          }
        }
        .details {
          cursor: pointer;
          color: #496bff;
        }
      }
    }
  }

  .glzdDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .glzdContent::-webkit-scrollbar {
      display: none;
    }
    .glzdContent {
      flex: 1;
      padding: 0.2vh 1vw 1vh;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      .itemDiv {
        background: url('@/assets/img/common/kv-a1.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        font-family: Source Han Sans CN;
        // font-weight: bold;
        font-size: 2.5vh;
        line-height: 7vh;
        color: #ffffff;
        margin-bottom: 1vh;
        padding: 0 2vh;
        box-sizing: border-box;
        justify-content: space-between;
        p:nth-child(1) {
          width: 75%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span {
            margin-right: 2vh;
          }
        }
      }
    }
  }
}
</style>
